<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>流动市场摊位管理系统</title>
	<link rel="stylesheet" type="text/css" href="${baseUrl }/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="${baseUrl }/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="${baseUrl }/css/frame_pro.css">
	<link rel="stylesheet" type="text/css" href="${baseUrl }/css/jiaoben.css">
	<script type="text/javascript" src="${baseUrl }/js/jquery.min.js"></script>
	<script type="text/javascript" src="${baseUrl }/js/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function Into()                //网页内按下回车触发
		{
	        if(event.keyCode==13)
	        {
	        	submitForm();  
	        }
		}
		document.onkeydown = Into;
	</script>
	
</head>
<body>
<canvas id="rain"></canvas>
<div id="container">
	<div id="w" class="easyui-window" title="用户登录" resizable="false" closable="false" minimizable="false" maximizable="false" collapsible="false" data-options="iconCls:'icon-save'" style="width:400px;height:300px;">
		<div class="formDiv">
	    <form id="login" method="post" style="margin-top:10%;" autocomplete="off">
	    	<table cellpadding="5" border="0">
	    		<tr>
	    			<td>登录名称:</td>
	    			<td><input class="easyui-validatebox textbox" type="text" name="userName" value="" data-options="required:true" maxlength="10" style="width:130px;height:20px;"></input></td>
	    		</tr>
	    		<tr>
	    			<td>登录密码:</td>
	    			<td><input class="easyui-validatebox textbox" type="password" name="userPwd" value="" data-options="required:true" maxlength="10" style="width:130px;height:20px;"></input></td>
	    		</tr>
	    		<tr>
	    			<td>校&nbsp;&nbsp;验&nbsp;码:</td>
	    			<td><img id="imgCode" src="${baseUrl }/admin/random_code" width="70" height="19" border="0" style="margin-top:0px;vertical-align:middle;cursor:hand" onclick="changeImg();" /><input class="easyui-validatebox textbox" type="text" id="code" name="code" maxlength="4" data-options="required:true" style="width:60px;height:20px;margin-left:2px;vertical-align:middle"></input></td>
	    		</tr>
	    	</table>
	    </form>
	    <div style="text-align:center;padding-top:20px;">
	    	<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">&nbsp;登&nbsp;录&nbsp;</a>
	    	<a href="javascript:void(0)" class="easyui-linkbutton" style="margin-left:10px;" onclick="clearForm()">&nbsp;取&nbsp;消&nbsp;</a>
	    </div>
	    </div>

	</div>
	<script>
    function changeImg()
	{
       var imgSrc = $("#imgCode");
       var src = imgSrc.attr("src");
       imgSrc.attr("src",chgUrl(src));
	}
	      //时间戳
	      //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
    function chgUrl(url){
       var timestamp = (new Date()).valueOf();
       var index = url.indexOf("?");
       if((index>=0)){
           url = url.substring(0,index);
       }
       
        url = url + "?timestamp=" + timestamp;
        return url;
      }
	      
		function submitForm()
		{
			$('#login').form('submit',{
				url:'${baseUrl }/admin/doLogin',
				dataType:'json',
				success:function(result){
					var json = $.parseJSON(result);
					if(json.success==0)
					{
						window.location.href="${baseUrl }/admin/main";
					}
					else
					{
						$.messager.alert("提示",json.msg,"info");
						changeImg();
						$('#code').val('');
						//window.location.href="index.html";
					}
				}
			});
		}
		function clearForm(){
			$('#login').form('clear');
		}
	</script>

	</div>
</body>

	<script type="text/javascript" src="${baseUrl }/js/jiaoben.js"></script>
	<style type="text/css">
		body{
			 background: url("../ali_icon/m_01.jpg") 0 0 no-repeat;
			 background-attachment: fixed;  
             background-size: cover;
		}
		.trSty{
			margin-top:10px!important;
		}
		.formDiv{
			width:100%;
			padding-bottom:10%;
		  	display: flex;
		  	flex-direction: column;
		  	justify-content: center;
		  	align-items: center;
  		}
	</style>
</html>